<template>
  <div class="global-effect">
    <div class="panel-header">全局效果</div>
    <div class="bg-gray"></div>
    <div class="panel-body">
      <div class="panel-body-left">
        <div
          class="sidebar-item"
          v-for="item in category"
          :key="item.code"
          :class="item.code === activeKey ? 'active' : ''"
          @click="() => setActive(item.code)"
        >
          <span>{{ item.title }}</span>
        </div>
      </div>
      <div class="panel-body-right">
        <LightSource
          v-if="activeKey === 'light' && sceneStore.globalEffectSetting?.light"
          :form="sceneStore.globalEffectSetting.light"
          :model="sceneStore.globalEffectSetting.light"
        ></LightSource>
        <Process
          v-if="activeKey === 'process' && sceneStore.globalEffectSetting?.process"
          :form="sceneStore.globalEffectSetting.process"
          :model="sceneStore.globalEffectSetting.process"
        ></Process>
        <Background
          v-if="activeKey === 'background' && sceneStore.globalEffectSetting?.background"
          :form="sceneStore.globalEffectSetting.background"
          :model="sceneStore.globalEffectSetting.background"
        ></Background>
        <Environment
          v-if="activeKey === 'environment' && sceneStore.globalEffectSetting?.environment"
          :form="sceneStore.globalEffectSetting.environment"
          :model="sceneStore.globalEffectSetting.environment"
        ></Environment>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useSceneStore } from '@/store/scene';
import LightSource from './attribute/light-source.vue';
import Process from './attribute/process.vue';
import Background from './attribute/background.vue';
import Environment from './attribute/environment.vue';

defineOptions({
  name: '',
});
const sceneStore = useSceneStore();

const category = [
  {
    key: 'light',
    title: '光源',
    code: 'light',
  },
  {
    key: 'process',
    title: '后期',
    code: 'process',
  },
  {
    key: 'background',
    title: '背景',
    code: 'background',
  },
  {
    key: 'environment',
    title: '环境',
    code: 'environment',
  },
];
const activeKey = ref('light');
const setActive = (key: string) => {
  activeKey.value = key;
};
</script>

<style lang="less" scoped>
.global-effect {
  height: 100%;
  overflow-y: hidden;

  .panel-header {
    height: 28px;
    line-height: 28px;
    font-size: 16px;
    text-align: center;
    background: #2e343c;
  }
  .bg-gray {
    height: 10px;
    background: #1c1f24;
  }

  .panel-body {
    display: flex;
    height: calc(100% - 38px);

    .panel-body-left {
      width: 78px;
      background: #14161a;
      overflow-y: auto;
      .sidebar-item {
        width: 100%;
        padding: 15px 6px 15px 8px;
        color: #9a9a9a;
        cursor: pointer;
        &.active {
          color: var(--el-color-primary);
          background: #0a0b0d;
        }
      }
    }

    .panel-body-right {
      flex: 1;
      height: 100%;

      :deep(.el-form) {
        .el-form-item {
          display: block;
          margin-bottom: 0;

          .el-form-item__label {
            line-height: 40px;
            height: 40px;
            margin-left: 20px;
          }
        }

        .shrink {
          position: absolute;
          font-size: 15px;
          top: -34px;
          right: 20px;
          width: 30px;
          display: flex;
          justify-content: center;
          height: 30px;
          align-items: center;
          cursor: pointer;
        }

        .line {
          height: 1px;
          background: #2e343c;
          width: 100%;
        }

        .shrink-contain {
          width: 100%;
          padding: 0 20px 20px 20px;
          margin-bottom: 10px;

          .row-item {
            margin-top: 20px;
            display: flex;
            align-items: center;

            &.margin-top-small {
              margin-top: 10px;
            }

            &.no-top {
              margin-top: 0px;
            }

            span {
              font-size: 14px;
            }

            .el-switch {
              margin-left: auto;
            }

            .default-input {
              width: 125px;
              margin-left: auto;
              margin-right: 5px;
            }
          }
        }
      }
    }
  }

  // 颜色选择器-下拉样式
  :deep(.el-color-picker) {
    margin-left: 10px;

    .el-color-picker__trigger {
      width: 172px;
      margin-left: auto;
      padding: 3px 0;
      padding-left: 6px;
      border-radius: 4px;
      border: 1px solid rgba(69, 72, 81, 0.6);
      justify-content: flex-start;

      .el-color-picker__color {
        width: 24px;
        border-radius: 4px;
        border: 1px solid rgba(69, 72, 81, 0.6);
        border-radius: 4px;

        i.el-icon.el-color-picker__icon.is-icon-arrow-down {
          display: inline-block !important;
          position: absolute;
          right: -136px;
          font-size: 14px;
          color: #a8abb2;
        }
      }
    }
  }
}
</style>
